<!--  -->
<template>
  <div class="rule-item-css">
    <div v-text="ruleItem.textBefore"></div>
    <el-select v-model="params[ruleItem.fieldsBoard]"
               :placeholder="ruleItem.hint"
               @change="changeBoardSelected"
               size="mini"
               clearable
               filterable
               default-first-option
               :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%' }"
               class="select-box">
      <el-option v-for="(o,io) in boardList"
                 :key="`board${io}`"
                 :value="o.id"
                 :label="o.name"></el-option>
    </el-select>
    <div v-html="ruleItem.textCenter"></div>
    <el-select v-model="params[ruleItem.fieldsStatus]"
               :placeholder="ruleItem.hint"
               size="mini"
               multiple
               clearable
               filterable
               default-first-option
               collapse-tags
               :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%' }"
               class="select-box">
      <el-option v-for="(j,ij) in statusList"
                 :key="`status${ij}`"
                 :value="j.id"
                 :label="j.name"></el-option>
    </el-select>
    <div v-html="ruleItem.textAfter"></div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/next-ticket-rule-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      boardList: [],
      statusList: []
    }
  },
  methods: {
    init () {
      this.getBoardList()
      this.params[this.ruleItem.fieldsBoard] && this.getStatusList()
    },
    getBoardList () {
      const params = {
        tenantCode: this.$store.state.user.tenantCode
      }
      this.$interface.nextTicket.getBoardListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.boardList = res.data
        })
        .catch(() => {
          this.boardList = []
        })
    },
    getStatusList (boardId) {
      boardId = boardId || this.params[this.ruleItem.fieldsBoard] || null
      if (!boardId) {
        this.statusList = []
        return false
      }
      const params = {
        tenantCode: this.$store.state.user.tenantCode,
        boardId: boardId
      }
      this.$interface.nextTicket.getBoardStatusListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.statusList = res.data
        })
        .catch(() => {
          this.statusList = []
        })
    },
    changeBoardSelected (val) {
      this.getStatusList(val)
      this.statusList = []
      this.params[this.ruleItem.fieldsStatus] = []
    }
  }
}
</script>

<style scoped lang='scss'>
.rule-item-css {
  display: flex;
  justify-content: flex-start;
  .select-box {
    margin: 0 10px;
  }
}
</style>
